<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/ycdb.png" alt="">
      </div>
      <h2>近30天光伏能耗总览</h2>
    </div>
    <div class="total_cont">
      <div class="total_item">
        <h2><img src="@/assets/img/zfd.png" alt=""> 总发电量（KWh）</h2>
        <div class="fontStyle fontItem1">
          <div class="item" v-for="(item, index) in fontArr1" :key="index">{{ item }}</div>
        </div>
      </div>
      <div class="total_item">
        <h2><img src="@/assets/img/zfd2.png" alt=""> 总用电量（KWh）</h2>
        <div class="fontStyle fontItem2">
          <div class="item" v-for="(item, index) in fontArr2" :key="index">{{ item }}</div>
        </div>
      </div>
    </div>
    <div class="total_info">
      <div class="item">
        <h2>今日发电</h2>
        <h3>{{info.day_power}}</h3>
        <h4>(KWh)</h4>
      </div>
      <div class="item">
        <h2>购入电量</h2>
        <h3>{{info.buy_power}}</h3>
        <h4>(KWh)</h4>
      </div>
      <div class="item">
        <h2>自用电量</h2>
        <h3>{{info.this_use_power}}</h3>
        <h4>(KWh)</h4>
      </div>
      <div class="item">
        <h2>入网电量</h2>
        <h3>{{info.total_use_power}}</h3>
        <h4>(KWh)</h4>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/assets/utils/api.js'
export default {
  data() {
    return {
      info: {},
      tenantid: 1128,
      index1: -1,
      index2: -1,
      fontArr1: [],
      fontArr2: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await api.getEnergyConsume({ tenantid: this.tenantid })
      this.info = res.data
      this.index1 = this.info.total_power.toString().indexOf('.')
      this.index2 = this.info.this_use_power.toString().indexOf('.')
      this.fontArr1 = this.info.total_power.toString().split('')
      this.fontArr2 = this.info.this_use_power.toString().split('')
    }
  },
  watch: {
    'index1'() {
      this.$nextTick(() => {
        document.querySelectorAll('.fontItem1 .item')[this.index1].className = 'itemChange'
      })
    },
    'index2'() {
      this.$nextTick(() => {
        document.querySelectorAll('.fontItem2 .item')[this.index2].className = 'itemChange'
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.total_cont {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0.66rem 0.37rem 0 0.37rem;

  .total_item {
    width: 47%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    h2 {
      color: #fff;
      font-size: 0.16rem;

      img {
        width: 0.2rem;
      }
    }

    .fontStyle {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 0.1rem;

      .item {
        font-family: 'loss';
        font-size: 0.3rem;
        background: linear-gradient(180deg, #41D9FF 0%, #419EFE 99.5849609375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        width: 0.3rem;
        height: 0.36rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin: 0 0.02rem;

        &::before {
          content: '';
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 47%;
          background: url("@/assets/img/numbj.png") no-repeat;
        }

        &::after {
          content: '';
          position: absolute;
          top: 0;
          width: 100%;
          height: 47%;
          background: url("@/assets/img/numbj.png") no-repeat;
        }
      }

      .itemChange {
        width: 0.1rem;
        height: 0.36rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.3rem;
        background: linear-gradient(180deg, #41D9FF 0%, #419EFE 99.5849609375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

}

.total_info {
  display: flex;
  justify-content: space-between;
  padding: 0.38rem 0.5rem 0 0.5rem;

  .item {
    width: 25%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;

    h2 {
      width: 100%;
      font-size: 0.16rem;
      color: #fff;
      padding-left: 0.1rem;
      position: relative;

      &::after {
        content: "";
        left: 0;
        top: 37%;
        width: 100%;
        height: 100%;
        position: absolute;
        background: url(/src/assets/img/bjblock.png) no-repeat center;
        background-size: 100% 80%;
        z-index: -1;
      }
    }

    h3 {
      font-size: 0.22rem;
      font-weight: bold;
      color: #50D5FD;
      padding: 0.1rem 0 0.02rem 0;
    }

    h4 {
      font-size: 0.12rem;
      color: #fff;
      opacity: 0.5;
    }
  }
}
</style>
